<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/手敲轮播图.css">
    <!-- <link rel="stylesheet" href="css/xxk.css"> -->
    <link rel="stylesheet" href="css/details.css">
    <title>details详情页</title>

</head>
<body>
    <!-- 顶部提醒 -->
    <div class="caution">
       
    </div>
 
    <!-- 登录注册 -->
    <div class="topBar">
       
    </div>
    <!-- logo行 -->
    <div class="searchBar">
     
    </div>
    <!-- 导航栏 -->
    <div class="nav">
    </div>

    <div class="boxd">
        <div class="box">


            <!-- ---------------以下内容为渲染-------------------- -->
            <!-- <div class="details-top">
                <span><a href="#">中图网</a>&nbsp;&gt;&nbsp;<a href="#">文学</a>&nbsp;&gt;&nbsp;<a href="#">中国现当代随笔</a>&nbsp;&gt;&nbsp;人间须尽欢</span>
            </div>
            <div class="details-left">
                <div class="details-left-img"><img src="http://image12.bookschina.com/2018/20180604/B7801339.jpg" alt="">
                <div class="details-l-r-xhk"></div>
            </div>


                <div class="details-l-r">
                   <div class="details-l-r-t">
                        <h2>人间须尽欢</h2>
                        <div class="details-l-r-t-d1">豆瓣8.1分，《世间的盐》作者全新作品集，精选四十余篇文章，均为近几年被文友和读者广为推崇的口碑作品。行走见识、家长里短、吃喝玩乐、礼俗掌故，嬉笑怒骂皆成文章。</div>
                        <span class="details-l-r-t-s">作者：<a href="#">高军</a></span>
                        <span class="details-l-r-t-s">原价：<a href="#">高军</a></span>
                        <span class="details-l-r-t-s">现价：<a href="#">高军</a></span>
                        <div class="details-l-r-t-d2">加入购物车</div> 
                    </div>  -->

                    <!-- ----------放大镜部分------------ -->
                    <!-- <div class="details-l-r-fdj">
                        <img class="details-l-r-fdj-img" src="http://image12.bookschina.com/2018/20180604/B7801339.jpg" alt="">
                    </div> -->
                    <!-- ----------放大镜部分------------ -->
                <!-- </div>
            </div> -->

            <!-- ---------------以上内容为渲染-------------------- -->

        </div>
    </div>



    <!-- --------底部-------- -->
    <div class="bottom-box">
       
    </div>
</body>
<script src="./libs/require.js" data-main="./js/details.js"></script>
</html> 
<!-- <script src="./libs/ajax.js"></script> -->
<!-- <script src="./libs/cookie.js"></script> -->
<!-- <script>

class Cart{
        constructor(){
            this.tbody = document.querySelector(".box");
            this.url = "http://localhost:3000/data/goods.json";
                    console.log(1)
            
            // 1. 开启ajax请求
            this.load();

            // 7. 绑定事件
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.tbody.addEventListener("click",function(eve){
                const e = eve || window.event;
                const tar = e.target || e.srcElement;
                if(tar.className === "details-l-r-t-d2"){
                    console.log(that.goodsMsg[that.goodsMsg.length-1].id);
                    that.id = that.goodsMsg[that.goodsMsg.length-1].id;
                    // console.log(that.id)
                    that.setCookie();
                }
                
            })
        }
        setCookie(){
            // 0. 假设数据的存储格式
            // [{id:"u143rufg",num:1},{},{},...]
    
            // 1. 先读数据
            this.goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
            // console.log(this.goodsMsg)
            if(this.goodsMsg.length < 1){
                // 2. 第一次存，直接存
                this.goodsMsg.push({
                    id:this.id,
                    num:1
                })
            }else{
                // 3. 不是第一次存，需要先读，读到数据之后
                // 4. 判断是否有重复数据
                let i=0;
                const flag = this.goodsMsg.some((val,idx)=>{
                    i = idx;
                    return val.id === this.id
                })
                if(flag){
                    // 5. 有，数量+1
                    this.goodsMsg[i].num++
                }else{
                    // 6. 没有，新增
                    this.goodsMsg.push({
                        id:this.id,
                        num:1
                    })
                }
            }
            // 7. 存回本地存储
            localStorage.setItem("goodsMsg", JSON.stringify(this.goodsMsg));
        }
        load(){
            ajax({
                url:this.url,
                success:(res)=>{
                    // 2. 解析数据
                    this.res = JSON.parse(res).msg;
                    console.log(this.res);
                    // 3. 获取本地存储数据
                    this.getCookie();
                }
            })
        }
        getCookie(){
            console.log(2);

            // 4. 解析本地存储数据
            this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
            // console.log(this.goodsMsg, this.res);
            // 5. 准备渲染页面
            this.render();
        }
        render(){
            let str = "";
            // 读取商品总数据
            for(let i=0;i<this.res.length;i++){
                // 读取本地存储数据
                    // 根据本地存储数据，比对商品总数据，获取到真正要渲染的数据
                    if(this.res[i].proId === this.goodsMsg[this.goodsMsg.length-1].id){
                        // console.log(this.res[i], this.goodsMsg[j].num);
                        // 拼接页面结构
                        str += `<div class="details-top">
                <span><a href="#">中图网</a>&nbsp;&gt;&nbsp;<a href="#">文学</a>&nbsp;&gt;&nbsp;<a href="#">中国现当代随笔</a>&nbsp;&gt;&nbsp;${this.res[i].bookName}</span>
            </div>
            <div class="details-left">
                         <div class="details-left-img"><img src="${this.res[i].urlImg}" alt=""> <div class="details-l-r-xhk"></div></div><div class="details-l-r">
                        <div class="details-l-r-t">
                        <h2>${this.res[i].bookName}</h2>
                        <div class="details-l-r-t-d1">${this.res[i].introduce}</div>
                        <span class="details-l-r-t-s">作者：<ahref="#">${this.res[i].author}</a></span>
                        <span class="details-l-r-t-s">原价：<ahref="#">${this.res[i].oPrice}</a></span>
                        <span class="details-l-r-t-s">现价：<ahref="#">${this.res[i].cPrice}</a></span>
                        <div class="details-l-r-t-d2">加入购物车<div> 
                        </div>
                        <div class="details-l-r-fdj">
                        <img class="details-l-r-fdj-img" src="${this.res[i].urlImg}" alt="">
                    </div>
                        </div>
                        </div>`;
                    
                    }
                
            }
            // 6. 填充到页面
            this.tbody.innerHTML = str;

            // ------------新增放大镜部分-----------------------

            
            function BigImg(){
                // 1. 选择元素
                this.sBox = document.querySelector(".details-left-img")
                this.sSpan = document.querySelector(".details-l-r-xhk")
                this.bBox = document.querySelector(".details-l-r-fdj")
                this.bImg = document.querySelector(".details-l-r-fdj-img")
                // 2. 执行绑定事件
                this.addEvent();
            }
            BigImg.prototype.addEvent = function(){
                const that = this;
                // 绑定进入事件：显示
                this.sBox.onmouseover = function(){
                    that.sSpan.style.display = "block";
                    that.bBox.style.display = "block";
                }
                // 绑定离开事件：隐藏
                this.sBox.onmouseout = function(){
                    that.sSpan.style.display = "none";
                    that.bBox.style.display = "none";
                }
                // 绑定移动事件：执行移动功能
                this.sBox.onmousemove = function(eve){
                    const e = eve || window.event;
                    // 3. 执行移动功能
                    that.move(e)
                }
            }
            BigImg.prototype.move = function(e){
                // 4. 先计算要移动的位置
                console.log(e.pageX);
                let l = e.pageX   - this.sSpan.offsetWidth/2;
                let t = e.pageY   - this.sSpan.offsetHeight/2;
                // 5. 边界限定
                if(l<this.sBox.offsetLeft) l=this.sBox.offsetLeft;
                if(t<this.sBox.offsetTop) t=this.sBox.offsetTop;
                if(l>this.sBox.offsetWidth+this.sBox.offsetLeft-this.sSpan.offsetWidth){
                    l=this.sBox.offsetWidth+this.sBox.offsetLeft-this.sSpan.offsetWidth
                }
                if(t>this.sBox.offsetHeight+this.sBox.offsetTop-this.sSpan.offsetHeight){
                    t=this.sBox.offsetHeight+this.sBox.offsetTop-this.sSpan.offsetHeight
                }
                // 6. 设置给遮罩层
                this.sSpan.style.left = l +  "px"
                this.sSpan.style.top = t + "px"
                // 7. 计算遮罩层移动的比例
                const x = (l-this.sBox.offsetLeft) / (this.sBox.offsetWidth-this.sSpan.offsetWidth)
                const y = (t-this.sBox.offsetTop) / (this.sBox.offsetHeight-this.sSpan.offsetHeight)
                // console.log(x, y)
                // 8. 根据遮罩层移动的比例，计算右侧大图应该移动的距离
                this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
                this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
    }


    new BigImg();







        }
    }

    new Cart;
  




   


</script> -->



<script src="./libs/jquery.js"></script>
<script>

    // 顶部提醒
    $(".caution").load("http://localhost:3000/public/public_index.html .cautionioc")


    // 开始动画
    $(".imgTop").load("http://localhost:3000/public/public_index.html .imgTop-box",function(){
        setTimeout(function(){
            console.log("这是三秒以后");
            $(".imgTop-box").animate({
                height : 100,
            }, 1000);
            $(".i1").animate({
                opacity: 'show'
            }, 1000);
            $(".i2").animate({
                height : 100, opacity: 'hide'
            }, 1000);
        },3000)
    })

    // 登录注册
    $(".topBar").load("http://localhost:3000/public/public_index.html .zhuce",function(){
        const zhanghu = document.getElementById("zhanghu");
        const zhul = document.querySelector(".zhul");
        zhanghu.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhanghu.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }
        zhul.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhul.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }



        //-------以下为登录注册行新加js

        if(localStorage.getItem("token") === "ok"){
            $(".loginArea").hide();
            $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
        }else{
            $(".loginArea1").hide();
            $(".loginArea").show();
        }

        $(".loginArea1-s2").click(function(){
            $(".loginArea1").hide();
            $(".loginArea").show();
            localStorage.setItem("token","no")
        })

        $(".zhanghu").click(function(){
            if(localStorage.getItem("token") === "ok"){
                $(".loginArea").hide();
                $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
            }else{
                if(confirm("您还未登录，是否前往登录？")){
                    location.href="./logon.html"
                }
                return false;
            }
        })


    })

    // logo行
    $(".searchBar").load("http://localhost:3000/public/public_index.html .searchBarFixed",function(){
        const otxt = document.getElementById("search");
        const obtn = document.querySelector(".s4");
        const oul = document.querySelector(".list");

        // 点击按钮，跳转到真实的百度搜索
        obtn.onclick = function(){
            location.href = "https://www.baidu.com/s?wd=" + otxt.value;
        }

        otxt.oninput = function(){
            
            // 判断输入框是否为空，为空，清除下拉菜单
            if(this.value === "") oul.innerHTML = "";
            oul.style.display = "block"
            // console.log(this.value)
            // 开启jsonp请求，请求百度数据
            jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",function  (res){
                // 请求成功后，处理数据
                // console.log(res.s);
                let str = "";
                // 拼接页面结构
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // 渲染页面
                // console.log(str)
                oul.innerHTML = str;
            
            
                oul.onmouseover = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "red";
                        // console.log(tag.innerHTML);
                        tag.onclick = function(){
                            otxt.value = tag.innerHTML;
                            oul.style.display="none";
                        }
                    }
                }
                oul.onmouseout = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "black";
                    }
                }
            },{
                wd:this.value,
                cb:"ajshdfgausdf",
                selfName:"cb"
            })
        }
        function jsonp(url,cb,data){
            let str = "";
            for(let i in data){
                str += `${i}=${data[i]}&`
            }
            url += "?" + str + "_qft_=" + Date.now();
            const script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
            window[data[data.selfName]] = function(res){
            cb(res);
        }
        }
    })
        
    //导航栏
    $(".nav").load("http://localhost:3000/public/public_index.html .nav1")

    //底部
    $(".bottom-box").load("http://localhost:3000/public/public_index.html .bottom")


</script>
